<template>
	<el-dialog v-model="dialogVisible" title="审核确认" width="40%" :lock-scroll="false">
		<div v-loading="loadings">
			<div class="box" v-for="(item, index) in topData" :key="item.id">
				<div v-if="index > 0 && item?.status != 0">
					<div class="top">>>{{ item?.name }}</div>
					<div class="item" v-for="(ite, inde) in reverses(item?.userVoList)" :key="item.id">
						<div class="itme_1">{{ chengeImg(ite.status) }}</div>
						<div style="margin: 0px 3px">{{ ite.deptName }}</div>
						<div class="itme_2">
							<span>{{ inde + 1 }}级审批</span>:<span>{{ ite.name }}</span>
						</div>
						<div :class="chengeColor(ite.status)">{{ chengeStatus(ite.status) }}</div>
					</div>
				</div>
			</div>
		</div>

		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="loading" @click="submit">确认</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { viewItem } from '/@/api/Implementation/addImple';
import { useDict } from '/@/hooks/dict';
import { watch, ref, nextTick } from 'vue';
import mittBus from '/@/utils/mitt';
import { cloneDeep } from 'lodash';
const router = useRouter();
const route = useRoute();
// 定义父组件传过来的值
const props = defineProps({
	flowData: {
		type: Object,
		default: () => {
			return {};
		},
	},
	processInstanceId: {
		type: String,
		default: () => {
			return '';
		},
	},
	title: {
		type: String,
		default: () => {
			return '';
		},
	},
	status: {
		type: Number,
		default: () => {
			return -1;
		},
	},
});
const loadings: any = ref(false);
const dialogVisible = ref(false);
const topData = ref([]);
watch(
	() => props.processInstanceId,
	(newVal) => {
		if (newVal) {
			// getDetail(newVal);
		}
	},
	{
		deep: true,
	}
);

const InstanceId = ref();
watch(
	() => InstanceId.value,
	(newVal) => {
		if (newVal) {
			getDetail(InstanceId.value);
		}
	},
	{
		deep: true,
	}
);
const getDetail = (newVal: any) => {
	loadings.value = true;
	viewItem({ processInstanceId: newVal })
		.then((res: any) => {
			loadings.value = false;
			if (res.ok) {
				topData.value = res.data;
				console.log(topData.value);
			}
		})
		.catch((res) => {
			loadings.value = false;
		});
};
watch(
	() => dialogVisible.value,
	(newVal) => {
		if (!newVal) {
			InstanceId.value = '';
			topData.value = [];
		} else {
			nextTick(() => {
				InstanceId.value = props.processInstanceId;
			});
		}
	}
);
const statusTag = () => {};
const chengeImg = (status: any) => {
	switch (status) {
		case 1:
			return '?';
		case 2:
			return '✔';
		case 3:
			return 'X';

		default:
			break;
	}
};

const chengeStatus = (status: any) => {
	switch (status) {
		case 1:
			return '待审核';
		case 2:
			return '已通过';
		case 3:
			return '已驳回';

		default:
			break;
	}
};
const chengeColor = (status: any) => {
	switch (status) {
		case 1:
			return 'itme_5';
		case 2:
			return 'itme_3';
		case 3:
			return 'itme_4';

		default:
			break;
	}
};
//倒序
const reverses: any = (arr: any) => {
	const array = cloneDeep(arr);
	if (array.length >= 1) {
		return array.sort(dateData('showTime', true));
	} else {
		return [];
	}
};
function dateData(property: any, bol: any) {
	return function (a: any, b: any) {
		var value1 = a[property];
		var value2 = b[property];
		if (bol) {
			// 升序
			return Date.parse(value1) - Date.parse(value2);
		} else {
			// 降序
			return Date.parse(value2) - Date.parse(value1);
		}
	};
}
//获取数据
const loading = ref(false);
const submit = () => {
	dialogVisible.value = false;
};
// 暴露
defineExpose({ dialogVisible });
</script>
<style scoped lang="scss">
.box {
	.top {
		color: #7a7c80;
	}
	.item {
		display: flex;
		align-items: center;
		margin: 5px 0px;
		.itme_1 {
			color: white;
			background-color: #519cfd;
			border-radius: 50%;
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.itme_2 {
			margin: 0px 5px;
			color: #7a7c80;
		}

		.itme_3 {
			font-size: 12px;
			background-color: #f1fff5;
			padding: 3px 5px;
			text-align: center;
			color: #5be2a1;
			border: 1px solid #c6f0d0;
			border-radius: 3px;
			margin-left: 5px;
		}
		.itme_4 {
			font-size: 12px;
			background-color: #d61321;
			padding: 3px 5px;
			text-align: center;
			color: white;
			border: 1px solid #d61321;
			border-radius: 3px;
			margin-left: 5px;
		}
		.itme_5 {
			font-size: 12px;
			background-color: #5e9afb;
			padding: 3px 5px;
			text-align: center;
			color: white;
			border: 1px solid #5e9afb;
			border-radius: 3px;
			margin-left: 5px;
		}
	}
}
</style>
